<template>
	<div>
		<el-card>
			<el-row :gutter="20" align="middle">
				<el-col :span="8" class="col">
					<el-row>
						<el-col :span="6" class="label">{{ $t('tankManagement.yewei') }}</el-col>
						<el-col :span="18">
							<el-row :gutter="20">
								<el-col :span="8"><Select v-model:modelValue="queryBOList[0].condition" :options="option" /></el-col>
								<el-col :span="16" class="condition">
									<el-input-number v-model:modelValue="queryBOList[0].value" controls-position="right" @keyup.enter="onEnter"/>
									<el-tooltip
										effect="dark"
										content="1: 有液，0: 无液"
										placement="top-start"
									>
										<el-icon class="icon">
											<QuestionFilled />
										</el-icon>
									</el-tooltip>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="8" class="col">
					<el-row>
						<el-col :span="6" class="label">{{ $t('tankManagement.wendu') }}</el-col>
						<el-col :span="18">
							<el-row :gutter="20">
								<el-col :span="8"><Select v-model:modelValue="queryBOList[1].condition" :options="option" /></el-col>
								<el-col :span="16"><el-input-number v-model:modelValue="queryBOList[1].value" controls-position="right" @keyup.enter="onEnter"/></el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="8" class="col">
					<el-row>
						<el-col :span="6" class="label">{{ $t('tankManagement.yali') }}</el-col>
						<el-col :span="18">
							<el-row :gutter="20">
								<el-col :span="8"><Select v-model:modelValue="queryBOList[2].condition" :options="option" /></el-col>
								<el-col :span="16"><el-input-number v-model:modelValue="queryBOList[2].value" controls-position="right" @keyup.enter="onEnter"/></el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row :gutter="20" align="middle">
				<!-- <el-col :span="8" class="col">
					<el-row>
						<el-col :span="6" class="label">{{ $t('tankManagement.shengfen') }}</el-col>
						<el-col :span="18">
							<Input v-model:modelValue="state.province" clearable @onEnter="onEnter"/>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="8" class="col">
					<el-row>
						<el-col :span="6" class="label">{{ $t('tankManagement.city') }}</el-col>
						<el-col :span="18">
							<Input v-model:modelValue="state.city" clearable @onEnter="onEnter"/>
						</el-col>
					</el-row>
				</el-col> -->
				<!-- <el-col :span="8" class="col">
					<el-row>
						<el-col :span="6" class="label">{{ $t('tankManagement.yichangMS') }}</el-col>
						<el-col :span="18">
							<Input v-model:modelValue="state.warnDescription" clearable @onEnter="onEnter"/>
						</el-col>
					</el-row>
				</el-col> -->
				<!-- <el-col :span="8" class="col">
					<el-row>
						<el-col :span="6" class="label">{{ $t('tankManagement.caijishijian') }}</el-col>
						<el-col :span="18">
							<DatePicker
								v-model:modelValue="state.collTimeStr"
								pickerType="daterange"
								:isShowDay="true" />
						</el-col>
					</el-row>
				</el-col> -->
			</el-row>
		</el-card>

	</div>
</template>

<script setup lang="ts">
import Input from './components/input.vue'
import Select from './components/select.vue'
import DatePicker from './components/datePicker.vue'
import i18n from '@/lang/index'
import _ from 'lodash'
const $t = i18n.global.t
const option = ref([
	{ name: '>', value: '>' },
	{ name: '<', value: '<' },
	{ name: '=', value: '=' },
	{ name: '>=', value: '>=' },
	{ name: '<=', value: '<=' },
])
const copyFieldBOList = [
	{
		condition: '',
		field: 'level',
		value: '',
	},
	{
		condition: '',
		field: 'temperature',
		value: '',
	},
	{
		condition: '',
		field: 'pressure',
		value: '',
	}
]
const copyState = {
	province: '',
	city: '',
	// warnDescription: '',
	collTimeStr: [],
}
const queryBOList = ref()
const state = ref()
const emits = defineEmits(['update:modelValue','onEnter'])
const reset = () => {
	queryBOList.value = _.cloneDeep(copyFieldBOList)
	state.value = _.cloneDeep(copyState)
}
reset()
watch(()=>[queryBOList,state], (val) => {
	emits('update:modelValue', {
		queryBOList: val[0].value,
		...val[1].value,
	})
}, { deep: true })

const onEnter = () => {
	emits('onEnter')
}

defineExpose({
	reset,
})
</script>

<style scoped>

.col {
	padding-bottom: 10px;
}
.condition {
	display: flex;
	align-items: center;
	.icon { 
		margin-left: 5px;
	}
}
.date_picker {
	width: 100%;
}
.el-input-number {
	width: 100%;
}
</style>